<script setup lang="ts">
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
// 导入 vue echarts 组件
import VChart from "vue-echarts";

// 按需导入
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const props = defineProps<{ data: Array<any> }>();

const chartRef = ref<InstanceType<typeof VChart>>();
// 由于在 setup 语法糖中没有 return，所以在默认情况下，该组件的实例无法调用组件内的属性和方法。
// 需要自行定义要导出的属性和方法
defineExpose({
  chartRef,
});

const option = computed(() => ({
  title: {
    text: "代办完成情况",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Traffic Sources",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: props.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
}));
</script>
<template>
  <VChart ref="chartRef" :option="option" />
</template>
